<script setup lang='ts'>
interface Props {
  page: number
  pageSize: number
  total: number
}
defineOptions({ name: 'AppSportsPagination' })
const props = defineProps<Props>()
const emit = defineEmits(['previous', 'next'])

const maxPage = computed(() => {
  return Math.ceil(props.total / props.pageSize)
})
const range = computed(() => {
  if (props.total === 0) return '0 - 0'

  const start = (props.page - 1) * props.pageSize + 1
  const end = Math.min(props.page * props.pageSize, props.total)

  return `${start} - ${end}`
})
const disabledPre = computed(() => props.total === 0 || props.page === 1)
const disabledNext = computed(() => props.total === 0 || props.page === maxPage.value)

function previous() {
  if (disabledPre.value)
    return
  emit('previous')
  scrollToTop()
}
function next() {
  if (disabledNext.value)
    return
  emit('next')
  scrollToTop()
}
</script>

<template>
  <div class="flex justify-center">
    <div class="w-full max-w-[213px]">
      <div class="wrap">
        <div @click="previous" class="arrow" :class="{ active: !disabledPre }">
          <BaseIcon name="uni-triangle" class="rotate-90" />
        </div>
        <span class="des">{{ $t('spt_page_range', { range }) }}{{ $t('spt_page_total', { total })
        }}</span>
        <div @click="next" class="arrow" :class="{ active: !disabledNext }">
          <BaseIcon name="uni-triangle" class="rotate-[-90deg]" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.wrap {
  color: var(--color-text-white-0);
  width: 100%;
  display: flex;
  align-items: center;
}

.arrow {
  background: var(--color-bg-black-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0.2;
  --tg-base-icon-color: var(--color-text-white-0);

  &.active {
    opacity: 1;
  }
}

.des {
  flex: 1;
  opacity: 0.5;
  padding: 0 16px;
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
</style>
